<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--  // 使用节点操作 在页面上根据数据显示出表格，并且实现删除功能 -->
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne" name="sex" value="男" />男
        <input type="radio" id="sexTwo" checked name="sex" value="女" />女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br />
    <table cellspacing="0" border="1" width="600px" text-align="center">
        <tr align="center">
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    </table>
    <script>
        document.querySelector("#add").onclick = function () {
            var name = document.querySelector("#username").value;
            var gender = document.querySelector("input[name='sex']:checked").value;
            var age = document.querySelector("#age").value;
            var trDom=document.createElement('tr');
            var tdDom1=document.createElement('td');
            var tdDom2=document.createElement('td');
            var tdDom3=document.createElement('td');
            var tdDom4=document.createElement('td');
            var textDom1=document.createTextNode(name)
            var textDom2=document.createTextNode(gender)
            var textDom3=document.createTextNode(age)
            var btnDom=document.createElement('button')
            var attrNode1= document.createAttribute('onclick');
            attrNode1.nodeValue = 'fn(this)';
            btnDom.setAttributeNode(attrNode1)
            var textbtnDom=document.createTextNode('删除');
            btnDom.appendChild(textbtnDom)
            console.log(btnDom);
            tdDom1.appendChild(textDom1);
            trDom.appendChild(tdDom1);   
            tdDom2.appendChild(textDom2);
            trDom.appendChild(tdDom2);  
            tdDom3.appendChild(textDom3);
            trDom.appendChild(tdDom3); 
            tdDom4.appendChild(btnDom);
            trDom.appendChild(tdDom4); 
            document.querySelector('tbody').appendChild(trDom);
            } 
             // 未来事件不能采用动态绑定，但是可以使用行内绑定
            function fn(obj){
                //parentElement表示获取到上一级的dom对象
                var trDom = obj.parentElement.parentElement;
                document.querySelector('tbody').removeChild(trDom);
            }       
    //         tdDom.appendChild(btnDom);
    //         tdDom.appendChild(textDom);
    //         trDom.appendChild(tdDom);
    </script>
</body>

</html>